<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{{ LEDGER_INSTANCE_NAME }} Indy Network</title>
  <link href="include/css/index.css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <script type="text/javascript"
      src="https://code.jquery.com/jquery-3.2.1.min.js"
      integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
      crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
  <script src="include/js/common.js"></script>

  {% include 'analytics.html' %}

</head>
<body>

  {% include 'header.html' %}

  {% raw %}
  <main id="vue-outer">
    <div :class="'row-outer' + (anonymous ? ' anonymous' : '')">
      <div class="col-main">
        <div class="panel panel-info" style="display: none" v-show="init_error">
          <div class="panel-body error">
            <p>
              {{ init_error }}
            </p>
          </div>
        </div>
        <div class="panel panel-info" style="display: none" v-show="! ready && ! init_error">
          <div class="panel-body warning not-ready">
            <p>
              <span class="fa fa-circle-o-notch fa-spin fa-fw"></span> Connecting to server ...
            </p>
          </div>
        </div>
        <div class="panel panel-default panel-node-status" style="display: none" v-show="ready && ! anonymous">
          <div class="panel-heading">
            <h2>
              <span class="fa fa-tachometer"></span>
              Validator Node Status
            </h2>
          </div>
          <div class="panel-body">
            <div class="panel panel-node">
              <div class="panel-body loading" v-if="! status">
                <p>
                  <span class="fa fa-circle-o-notch fa-spin fa-fw"></span> Loading status ...
                </p>
              </div>
              <div class="panel-body error" v-if="status && status.err">
                <p>
                  <span class="fa fa-warning"></span> Error loading validator node status.
                </p>
              </div>
              <template v-if="status && status.rows">
                <div class="panel-body node-status" v-for="row in status.rows">
                  <div class="node-status-left">
                    <label class="node-name"><span class="nodeval-name">{{ row.name }}</span></label>
                    <div class="node-indicator">
                      <svg width="100%" height="100%" viewBox="0 0 120 120">
                          <circle cx="60" cy="60" r="54" fill="none" stroke="#e6e6e6" stroke-width="12" />
                          <circle class="progress-circle" cx="60" cy="60" r="54" fill="none" stroke="#80DDE6" stroke-width="12"
                              stroke-linecap="round" :stroke-dasharray="row.dash_array" :stroke-dashoffset="row.dash_offset" transform="rotate(-90, 60, 60)" />
                      </svg>
                    </div>
                  </div>
                  <div class="node-status-right">
                    <dl class="props">
                      <dt>Node properties</dt>
                      <dd class="node-did"><label>DID:</label> <code class="nodeval-did">{{ row.did }}</code></dd>
                      <dd class="node-state" v-if="row.state"><label>State:</label> <span class="nodeval-state">{{ row.state }}</span></dd>
                      <dd class="node-uptime"><label>Uptime:</label> <span class="nodeval-uptime">{{ row.uptime }}</span></dd>
                      <dd class="node-txns"><label>Txns:</label> <span class="nodeval-txns">{{ row.txns }}</span></dd>
                      <dd class="node-unreach" v-if="row.unreachable"><label>Unreachable hosts:</label> <span class="nodeval-unreach">{{ row.unreachable }}</span></dd>
                      <dd class="node-indyver"><label>indy-node version:</label> <span class="nodeval-indyver">{{ row.indy_version }}</span></dd>
                    </dl>
                  </div>
                </div>
              </template>
            </div>
            <p>
              View detailed information about the status of the running validator nodes:
            </p>
            <p>
              <a href="/status/text" class="tool"><span class="fa fa-chevron-right left"></span>Detailed Status</a>
            </p>
          </div>
        </div>

        <div class="panel panel-default panel-ledger-status" style="display: none" v-show="ready">
          <div class="panel-heading">
            <h2>
              <span class="fa fa-sitemap"></span>
              Ledger State
            </h2>
          </div>
          <div class="panel-body">
            <div class="panel panel-node" v-if="syncing">
              <div class="panel-body loading">
                <p>
                  <span class="fa fa-info-circle"></span> Fetching transactions
                </p>
              </div>
            </div>
            <p>
              View the state of the ledgers:
            </p>
            <p>
              <a href="/browse/domain" class="tool"><span class="fa fa-chevron-right left"></span>Domain</a>
              <br>
              <a href="/browse/pool" class="tool"><span class="fa fa-chevron-right left"></span>Pool</a>
              <br>
              <a href="/browse/config" class="tool"><span class="fa fa-chevron-right left"></span>Config</a>
            </p>
          </div>
        </div>
      </div>

      <aside class="col-tools" style="display: none" v-show="ready">
        <div class="panel panel-side connect">
          <div class="panel-heading">
            <h2>
              <span class="fa fa-plug"></span>
              Connect to the Network
            </h2>
          </div>
          <div class="panel-body">
            <p>
              Download the genesis transaction file to connect to the network.
            </p>
            <div class="form-group">
              <a href="/genesis" class="tool-button"><span class="fa fa-download left"></span>Genesis Transaction</a>
              <span class="tool-tag">JSON</span>
            </div>
          </div>
        </div>

        <div class="panel panel-side authorize" v-if="register_new_dids">
          <div class="panel-heading">
            <h2>
              <span class="fa fa-key"></span>
              Authenticate a New DID
            </h2>
          </div>
          <div class="panel-body" v-show="true">
            <p>
              Easily write a new DID to the ledger for new identity owners.
            </p>
            <form action="/register" method="get" accept-charset="utf-8" @submit.prevent="register">
              <div class="form-group">
                <input type="radio" value="seed" v-model="reg_info.reg_type" id="reg-seed">
                  <label for="reg-seed" class="tool-label inline">Register from seed</label>
                &nbsp; <input type="radio" value="did" v-model="reg_info.reg_type" id="reg-did">
                  <label for="reg-did" class="tool-label inline">Register from DID</label>
              </div>

              <div class="form-group" v-if="reg_info.reg_type == 'seed'">
                <label class="tool-label">Wallet seed (32 characters or base64)</label>
                <input
                  class="tool-input wallet-seed"
                  type="text"
                  name="seed"
                  v-model="reg_info.seed"
                  required
                >
              </div>
              <div class="form-group">
                <label class="tool-label">DID <template v-if="reg_info.reg_type == 'seed'">(optional)</template></label>
                <input
                  class="tool-input wallet-seed"
                  type="text"
                  name="did"
                  v-model="reg_info.did"
                  :required="reg_info.reg_type == 'did'"
                >
              </div>
              <div class="form-group" v-if="reg_info.reg_type == 'did'">
                <label class="tool-label">Verkey</label>
                <input
                  class="tool-input wallet-seed"
                  type="text"
                  name="verkey"
                  v-model="reg_info.verkey"
                  required
                >
              </div>
              <div class="form-group">
                <label class="tool-label">Alias (optional)</label>
                <input
                  class="tool-input wallet-seed"
                  type="text"
                  name="alias"
                  v-model="reg_info.alias"
                >
              </div>
              <div class="form-group">
                <label class="tool-label">Role</label>
                <select name="role" v-model="reg_info.role">
                  <option value="">(None)</option>
                  <option v-for="opt in role_options" :value="opt.value">{{opt.label}}</option>
                </select>
              </div>
              <div class="form-group">
                <button class="tool-button" type="submit" name="register"><span class="fa fa-sign-in left"></span>Register DID</button>
              </div>
            </form>

            <div class="register-result" v-if="reg_result">
              <h3>Identity successfully registered:</h3>
              <code>
                <span v-if="reg_result.seed"><b>Seed: </b> {{reg_result.seed}}<br></span>
                <b>DID: </b> {{reg_result.did}}<br>
                <b>Verkey:</b> {{reg_result.verkey}}
              </code>
            </div>
            <div class="error register-error" v-if="reg_error">
              Error: identity not registered.
            </div>
          </div>
        </div>

      </aside>
    </div>
  </main>
  {% endraw %}

  <script src="include/js/index.js" type="text/javascript"></script>
</body>
</html>

